<script>
import request from "@/utils/request";
import Footer from '../components/Footer.vue'
import Logo from '../components/Logo.vue'
import { loginUser } from "@/utils/login-user";

export default {
  name: "Login",
  created() {
    document.title = '欢迎登录';
  },
  components: {
    Footer,
    Logo
  },
  data() {
    return {
      form: {
        username: '',
        password: '',
        terms: false
      },
      // 表单数据验证规则
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 25,
            message: "长度在 2 到 25 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1到 15 个字符", trigger: "blur" },
        ],
        terms: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback();
              } else {
                callback(new Error("请同意协议内容"));
              }
            },
            trigger: "change",
          },
        ],
      },
    }
  },
  methods: {
    // 从验证码子组件里面获取正确的验证码
    login() {
      this.$refs['loginForm'].validate((valid) => {
        // 如果满足输入的规则
        if (valid) {
          // 出来了就是验证码正确，就发送给后端
          request.post('/user/login', this.form).then(res => {
            if (res.code === '0') {
              this.$message({
                type: 'success',
                message: "登录成功",
              });
              // 缓存用户信息
              loginUser(res.data)
              // 跳转主页，检测用户的角色是否为管理员，role为1就跳转到管理页面
              this.$router.push('/shop');
            } else {
              this.$message({
                type: 'error',
                message: res.msg,
              })
            }
          });
        }
      });
      return;
    },
    register() {
      this.$router.push('/register')
    }
  }
}
</script>

<template>
  <div>
    <header>
      <div class="header-container">
        <div class="logo-wrapper">
          <Logo />
        </div>
      </div>
    </header>
    <main>
      <div class="body-container">
        <span class="login-tip">登录Colorful官网</span>
        <el-form ref="loginForm" :model="form" :rules="rules" @submit.native.prevent>
          <el-form-item prop="username">
            <el-input class="w-50 m-2 login-input" v-model="form.username" placeholder="用户名" prefix-icon="el-icon-user"
              clearable />
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" class="w-50 m-2 login-input" v-model="form.password" placeholder="密码"
              prefix-icon="el-icon-lock" clearable />
          </el-form-item>
          <span class="password-tip">忘记密码</span><br />
          <button class="login-btn" @click="login">登录</button>
          <el-form-item prop="terms">
            <el-checkbox v-model="form.terms"></el-checkbox><span
              class="policy-wrapper">已阅读并同意《Colorful用户服务协议》和《Colorful隐私政策》</span>
          </el-form-item>
        </el-form>
        <div class="register-wrapper">
          <span><a href="#" @click.prevent="register">免费注册</a></span>
        </div>
      </div>
    </main>
    <Footer />
  </div>
</template>

<style scoped>
.el-form /deep/ .el-input {
  margin: 5px 0;
}

.register-wrapper {
  text-align: right;
  font-size: 10px;

  a {
    color: red;
  }
}

.policy-wrapper {
  font-size: 8px;
}

.policy-wrapper>input {
  height: 10px;
}

.login-input,
.password-tip {
  margin: 10px 0;
}

.password-tip {
  font-size: 12px;
}

.login-btn {
  background-color: black;
  width: 100%;
  color: white;
  font-size: 15px;
  line-height: 30px;
  margin-top: 10px;
  cursor: pointer;
}

.login-tip {
  margin-bottom: 20px;
  display: inline-block;
  font-size: 20px;
}


header {
  display: flex;
  height: 90px;
  justify-content: center;
  align-items: center;
}

.login-form {
  background-color: white;
  height: 120px;
}

.body-container {
  width: 300px;
  height: 380px;
  margin-left: 60%;
  background-color: white;
  padding: 30px;
}

main {
  display: flex;
  margin: 0 auto;
  height: 600px;
  align-items: center;
  background-image: url('../assets/login-bg.jpg');
}

.logo-wrapper {
  width: 60%;
}

.header-container {
  width: 60%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.welcome-tip {
  margin-left: 20px;
}
</style>

